<script lang="ts" setup>
  import { Game } from '@/types/game';
  import dayjs from 'dayjs';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import {
    GameGroupTypes,
    GameRegionLevels,
    GameTypes,
    RankLevels,
  } from '@/config/game';

  defineProps<{
    game: Partial<Game>;
  }>();
</script>

<template>
  <img
    v-if="game.detailPicsFileList && game.detailPicsFileList.length > 0"
    :src="game.detailPicsFileList[0].response"
    style="width: 100%"
  />
  <div v-else class="game">
    <div
      class="banner"
      :style="{
        backgroundImage:
          game.picsFileList && game.picsFileList.length > 0
            ? `url(${game.picsFileList?.[0]?.response})`
            : '',
      }"
    >
    </div>
    <div class="game-wrapper">
      <div>
        <div class="game-name">
          {{ game.name }}
        </div>

        <div class="game-info">
          <div class="game-info-title">
            <span>赛事信息</span>
          </div>
          <div class="game-info-content">
            <div class="game-info-item"> 赛事名称：{{ game.name }} </div>
            <div v-if="game.signRange" class="game-info-item">
              报名日期：{{ dayjs(game.signRange[0]).format('MM月DD日') }} -
              {{ dayjs(game.signRange[1]).format('MM月DD日') }}
            </div>
            <div v-if="game.range" class="game-info-item">
              赛事日期：{{ dayjs(game.range[0]).format('MM月DD日') }}
              {{
                dayjs(game.range[1]).format('MM月DD日') ===
                dayjs(game.range[0]).format('MM月DD日')
                  ? ''
                  : ` - ${dayjs(game.range[1]).format('MM月DD日')}`
              }}
            </div>
            <div class="game-info-item">
              赛事地区：{{
                ProvinceJSON.find((i) => i.id === game.province)?.name
              }}
              /
              {{
                (CityJSON[game.province as keyof typeof CityJSON] || []).find(
                  (i) => i.id === game.city
                )?.name
              }}
            </div>
            <div class="game-info-item">
              赛事球场：{{ game.course?.name }}
            </div>
            <div class="game-info-item">
              球场地址：{{ game.course?.address }}
            </div>

            <div style="height: 12px"></div>

            <div class="game-info-item">
              赛事积分级别：{{
                RankLevels.find((i) => i.value === game.rankLevel)?.label
              }}
            </div>
            <div class="game-info-item">
              赛事级别：{{
                GameRegionLevels.find((i) => i.value === game.regionLevel)
                  ?.label
              }}
            </div>
            <div class="game-info-item">
              赛事类型：{{
                GameTypes.find((i) => i.value === game.type)?.label
              }}
            </div>
            <div class="game-info-item">
              比赛形式：{{
                game.groupType === undefined
                  ? '-'
                  : GameGroupTypes.filter(
                      // @ts-ignore
                      (i) => (i.value & game.groupType) === i.value
                    )
                      .map((i) => i.label)
                      .join('，')
              }}
            </div>
            <div class="game-info-item">
              开球方式：
              <template v-if="game.kickoffType === 1">
                {{ game.kickoffTime }} 同时开球
              </template>
              <template v-else-if="game.kickoffType === 2">
                按Teetime发球，第一组开球时间：{{ game.kickoffTime }}
              </template>
            </div>
            <div class="game-info-item"> 奖励办法：{{ game.rewardTip }} </div>

            <template v-if="game.sponsors">
              <div style="height: 12px"></div>
              <div class="game-info-item">
                赞助商：
                {{ game.sponsors }}
              </div>
            </template>
          </div>
        </div>

        <div v-if="game.caddieFee" class="game-info">
          <div class="game-info-title">
            <span>赛事费用</span>
          </div>
          <div class="game-info-content">
            <!--            <div class="game-info-item">-->
            <!--              比赛费用：{{-->
            <!--                game.rmbPrice ? (game.rmbPrice / 100).toFixed(2) : ''-->
            <!--              }}元-->
            <!--              <template v-if="game.payItems">-->
            <!--                (包含：{{ (JSON.parse(game.payItems) as string[]).join('、') }})-->
            <!--              </template>-->
            <!--            </div>-->
            <div class="game-info-item">
              赛事助理（球童）服务费：每位选手{{
                game.caddieFee ? game.caddieFee.toFixed(2) : ''
              }}元，需自理<template v-if="game.caddieTip"
                >({{ game.caddieTip }})</template
              >
            </div>
          </div>
        </div>

        <div class="game-info">
          <div class="game-info-title">
            <span>赛事日程</span>
          </div>
          <div class="game-info-content">
            <div
              v-for="(schedule, index) in game.scheduleList || []"
              :key="index"
              class="schedule-item"
            >
              <div
                class="schedule-item-time"
                :style="{ backgroundColor: game.themeColor }"
              >
                {{ schedule.range[0] }}
                {{
                  schedule.range[0] === schedule.range[1]
                    ? ''
                    : ` - ${schedule.range[1]}`
                }}
              </div>
              <div class="schedule-item-line"></div>
              <div
                class="schedule-item-content"
                :style="{ backgroundColor: game.themeColor }"
                >{{ schedule.content }}</div
              >
            </div>
          </div>
        </div>

        <div class="game-info">
          <div class="game-info-title">
            <span>赛事规程</span>
          </div>
          <div class="game-info-content">
            <div
              v-for="(section, index) in game.detailSectionList"
              :key="index"
              class="game-rule"
            >
              <div class="game-rule-title">{{ section.title }}:</div>
              <div class="game-rule-content">
                <div v-for="(p, pi) in section.content.split('\n')" :key="pi">{{
                  p
                }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .game {
    color: #333;
    line-height: 1.5;
    &-name {
      font-size: 18px;
      text-align: center;
      font-weight: 600;
      padding: 30px 0 40px;
    }

    &-info {
      margin-bottom: 30px;
      padding: 0 12px;

      &-title {
        padding-left: 8px;
        span {
          font-weight: 600;
          font-size: 16px;
          display: inline-block;
          line-height: 32px;
          width: 158px;
          text-align: center;
          background: url(https://qiming-golf-zjk.oss-cn-zhangjiakou.aliyuncs.com/golf/golf/bgs/game-section-header.png)
            no-repeat;
          background-size: 100% 100%;
        }
      }

      &-content {
        padding: 10px;
        background: #fff;
        border-radius: 10px;
      }

      &-item {
        margin-bottom: 10px;
        padding-left: 12px;
        position: relative;
        line-height: 26px;
        &:before {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          background: #666;
          left: 0;
          top: 10px;
          border-radius: 100%;
        }
      }
    }

    &-rule {
      margin-bottom: 30px;

      &-title {
        margin-bottom: 10px;
        position: relative;
        padding-left: 12px;
        &:before {
          content: '';
          position: absolute;
          width: 6px;
          height: 6px;
          background: #333;
          left: 0;
          top: 50%;
          margin-top: -3px;
          border-radius: 100%;
        }
      }
    }
  }

  .schedule-item {
    display: flex;
    height: 40px;
    align-items: center;
    font-size: 12px;
    &-time {
      width: 100px;
      text-align: center;
      line-height: 28px;
      border-radius: 14px;
      background: rgb(var(--blue-6));
      color: #fff;
    }
    &-line {
      flex: 1;
      height: 1px;
      border-bottom: 1px dashed rgb(var(--gray-4));
    }
    &-content {
      width: 100px;
      text-align: center;
      line-height: 28px;
      border-radius: 14px;
      background: rgb(var(--blue-6));
      color: #fff;
    }
  }

  .banner {
    height: 210px;
    background-color: #999;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
